<template>
  <div class="lists-container">
    <div class="order-wrapper" v-if="listsData.length>0">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
      >
      <div class="order-box" v-for="(listsItem,index) in listsData" :key="index">
        <section class="order-list-info clearfix">
          <span class="fl">
            <p>订单：{{listsItem.order_no}}</p>
            <p>日期：{{listsItem.pay_time}}</p>
          </span>
          <span  class="status fr" v-if="listsItem.status == 0">{{listParams.type == 2? '待发放':'待收益'}}</span>
          <span  class="status fr" v-else-if="listsItem.status == 1">待确定</span>
          <span  class="status fr" style="color: #999;" v-else-if="listsItem.status == 2">已确定</span>
        </section>
        <section class="order-goods">
          <ul>
            <li
              v-for="(goods,index) in listsItem.item_info"
              :key="index"
              class="goods-li"
            >
              <section class="order-goods-img">
                <a href="javascript:;" @click="openLink(goods.item_id)">
                  <img :src="goods.pic_url +'160x160'" width="80" height="80" v-if="goods.is_compress"/>
                  <img :src="goods.pic_url" width="80" height="80" v-else/>
                </a>
              </section>
              <section class="order-goods-infor g-flex">
                <div class="left">
                  <a class="goods-title" href="javascript:;" @click="openLink(goods.item_id)" >{{goods.item_title}}</a>
                  <p class="goods-props" v-if="goods.sku_name">{{goods.sku_name}}</p>
                  <span class="price" v-html="scaleGoodsPriceFn(goods.current_price)"></span>
                </div>
                <div class="right">
                  <span class="num fr"><i>x</i>{{goods.num}}</span>
                </div>
              </section>
            </li>
          </ul>
        </section>
        <section class="order-pay">
          <!-- 待发放 -->
          <div class="good-more-btn" v-if="listsItem.status == 0">
            <span>实付款：<span><i>&yen;</i><em>{{listsItem.payment}}</em></span></span>
            <span style="margin-left:6px;">
              销售奖：<span><span class="good-discount-price"><i>&yen;</i><em>{{listsItem.reward}}</em></span></span>
            </span>
            <van-uploader :after-read="uploadBusinessLicence(listsItem)" accept="image/*" class="confirm-btn" v-if="listParams.type == 2">
              <div>确认发放</div>
            </van-uploader>
          </div>
          <!-- 待确定 -->
          <div class="good-more-btn" v-else-if="listsItem.status == 1">
            <span>实付款：<span><i>&yen;</i><em>{{listsItem.payment}}</em></span></span>
            <span style="margin-left:6px;">
              销售奖：<span><span class="good-discount-price"><i>&yen;</i><em>{{listsItem.reward}}</em></span></span>
            </span>
            <van-button round hairline class="btn J_del" @click="clickDelOrder(listsItem.file_path)">打款凭证</van-button>
            <van-button round hairline class="btn orange-btn" @click="clickConfirm(listsItem.id)" v-if="listParams.type == 1">确认到账</van-button>
          </div>
          <!-- 已确定 -->
          <div class="good-more-btn" v-else-if="listsItem.status == 2">
            <span>实付款：<span><i>&yen;</i><em>{{listsItem.payment}}</em></span></span>
            <span style="margin-left:6px;">
              销售奖：<span><span class="good-discount-price"><i>&yen;</i><em>{{listsItem.reward}}</em></span></span>
            </span>
            <van-button round hairline class="btn J_del" @click="clickDelOrder(listsItem.file_path)">打款凭证</van-button>
          </div>
        </section>
      </div>
      </van-list>
    </div>
    <div v-else>
      <no-data :noData=noData></no-data>
    </div>
    <!-- 打款凭证弹框 -->
    <van-dialog v-model="imgShow" confirmButtonColor="#f20b22">
      <div class="payment-voucher">
        <img :src="pic_url" />
      </div>
    </van-dialog>
  </div>
</template>

<script>
import noData from '@/components/noData/index'
import { scaleGoodsPrice } from '@/utils/index.js'
import { openPage } from '@/utils/utils'
import { uploadImgs } from '@/api/community/article'
import { getSalesAwardList, confirmCertificate } from '@/api/dz/dzApi.js'
import Vue from 'vue'
import { Uploader, Toast, Dialog } from 'vant'
Vue.use(Uploader)
Vue.use(Toast)
Vue.use(Dialog)
export default Vue.extend({
  name: 'index',
  components: {
    noData
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无收益',
        marginTop: '60px',
        width: '214px',
        txtMarginTop: '-46px'
      },
      listsData: [],
      imgShow: false,
      loading: false,
      error: false,
      finished: false,
      listParams: {
        p: 1,
        status: null, // 0 待发放、1待确认 、2已确定
        order_no: '', // 搜索关键词
        type: 1 // 1待收益、2待发放
      },
      pic_url: ''
    }
  },
  methods: {
    openLink(id) {
    this.$JumpName(this, 'item-detail', { detailId: id })
      
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    // 获取初始数据
    init() {
      this.listsData = []
      this.listParams.p = 1
      this.finished = false
      this.loading = false
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getSalesAwardList(this.listParams).then(res => {
        if (res.status == 0) {
          Toast(res.msg)
        } else {
          const waitData = {
            wait_profit: res.wait_profit,
            wait_send: res.wait_send,
            earned: res.earned,
            issued: res.issued

          }
          this.$Bus.$emit('waitData', waitData)
          this.listsData = res.list
          this.listParams.p++
        }
        this.$loadingWrap.close()
      })
    },
    // 打款凭证
    clickDelOrder(url) {
      this.imgShow = true
      this.pic_url = url
    },
    // 确认到账
    clickConfirm(id) {
      const params = {
        id: id,
        type: this.listParams.type,
        operate_type: 'confirm',
        status: 2
      }
      Dialog.confirm({
        message: '确定到账？',
        className: 'common-confirm',
        closeOnClickOverlay: true
      }).then(() => {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        confirmCertificate(params).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('操作成功')
            this.init()
          } else {
            this.$Error(res.msg)
          }
        })
        // on confirm
      }).catch(() => {
        // on cancel
      })
    },
    // 加载更多
    onLoad() {
      getSalesAwardList(this.listParams).then(res => {
        this.loading = false
        if (res.list.length) {
          this.listsData.push(...res.list)
          this.listParams.p++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    },
    // 图片上传
    uploadBusinessLicence(item) {
      return file => {
        const id = item.id
        this.uploadImgsFn(file, id)
      }
    },
    uploadImgsFn(file, id) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      const form = new FormData()
      form.append('file', file.file)
      uploadImgs(form).then(res => {
        if (res.status == 1) {
          const params = {
            id: id,
            type: this.listParams.type,
            operate_type: 'upload_certificate',
            file_path: res.data.pic_url
          }
          confirmCertificate(params).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              Toast('上传成功')
              this.init()
            } else {
              Toast(res.msg)
            }
          })
        } else {
          Toast('上传失败')
        }
      })
    }
  },
  created() {
    this.init()
    var that = this
    // 切换状态
    this.$Bus.$on('statusEvent', function(option) {
      that.listParams.status = option.status
      that.listParams.type = option.dzStatus
      that.init()
      if (that.listParams.type == 2) {
        that.noData.text = '暂无发放'
      } else {
        that.noData.text = '暂无收益'
      }
    })
    // 搜索
    this.$Bus.$on('keywordEvent', function(option) {
      that.listParams.order_no = option.keyword
      that.init()
    })
  },
  mounted() {
    // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
  }
})
</script>

<style lang="scss">
@import "src/styles/order/lists";
.payment-voucher {
  img {
    width: 100%;
  }
}
.confirm-btn {
  border: 1px solid #F20B22;
  color: #F20B22;
  text-align: center;
  border-radius: 30px;
  padding: 0 30px;
  line-height: 55px;
  font-size: 25px;
}
.good-discount-price {
  color: #F30C23;
}
</style>
